<template>
  <div class="exam-page">
    <van-notice-bar
      color="#1989fa"
      wrapable
      :scrollable="false"
      background="#ecf9ff"
      left-icon="info-o"
    >
      <div class="xl">腿围测试/SARC测试二选一</div>
    </van-notice-bar>
    <van-radio-group v-model="form.check1" size="large" class="mb10">
      <van-cell-group>
        <van-cell
          size="large"
          title="腿围测试"
          clickable
          @click="form.check1 = 1"
        >
          <template #right-icon>
            <van-radio :name="1" />
          </template>
          <template #label>
            测量前准备：非弹力软尺、椅子
          </template>
        </van-cell>
        <van-cell
          size="large"
          title="SARC测试"
          clickable
          @click="form.check1 = 2"
        >
          <template #right-icon>
            <van-radio :name="2" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <van-notice-bar
      color="#1989fa"
      wrapable
      :scrollable="false"
      background="#ecf9ff"
      left-icon="info-o"
    >
      <div class="xl">握力评估测试/5次起坐试验二选一</div>
    </van-notice-bar>
    <van-radio-group v-model="form.check2">
      <van-cell-group>
        <van-cell
          size="large"
          title="握力评估测试"
          clickable
          @click="form.check2 = 3"
        >
          <template #right-icon>
            <van-radio :name="3" />
          </template>
          <template #label>
            测量前准备：握力器。
          </template>
        </van-cell>
        <van-cell
          size="large"
          title="5次起坐试验"
          clickable
          @click="form.check2 = 4"
        >
          <template #right-icon>
            <van-radio :name="4" />
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
    <fixed-bottom>
      <van-button block type="primary" @click="toDetail()">确认选择</van-button>
    </fixed-bottom>
  </div>
</template>

<script>
import FixedBottom from "@/components/FixedBottom";
import {
  Icon,
  RadioGroup,
  Radio,
  Cell,
  CellGroup,
  NoticeBar,
  Button
} from "vant";
import Taro from "@tarojs/taro";
export default {
  components: {
    [Icon.name]: Icon,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [NoticeBar.name]: NoticeBar,
    [Button.name]: Button,
    FixedBottom
  },
  data() {
    return {
      types: [],
      form: { check1: 1, check2: 3 },
      loading: false
    };
  },
  onLoad(options) {
    this.type = options.type;
  },
  methods: {
    async loadMore(type) {},
    toDetail(item) {
      const { check1, check2 } = this.form;
      this.toPage("/pages/examdetail/detail", {
        type: `${check1},${check2}`
      });
    }
  }
};
</script>

<style lang="less">
.exam-page {
  min-height: 100vh;
  padding-top: 20px;
  padding-bottom: 40px;
  box-sizing: border-box;
  background-color: #f5f5f5;
}
.exam-card {
  background-color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 -2px 0 0 #f5f5f5;
  height: 150px;
  padding: 0 40px;

  font-size: 36px;
  color: #333333;

  &__title {
    flex: 1;
    font-weight: 500;
  }

  &__icon--prefix ~ &__title {
    margin-left: 10px;
  }

  &__icon--prefix {
    color: @primary;
    font-size: 60px;
  }
}
</style>
